<template>
	<view>
		<view class="pr xflex-x xmt32">
			<view class="slider-bottom pa">

			</view>
			<view class="pa slider-total xflex-x-center">
				￥{{endPrice}}
			</view>
			<view class="pa slider-choose" :style="{ width: `${sliderPosition}rpx` }">

			</view>


			<view class="pa slider-price xflex-x-center" :style="{ transform: `translateX(${sliderPosition}rpx)` }" @touchstart.stop="touchStart" @touchend.stop="touchEnd"
				@touchmove.stop="handletouchmove">
				￥{{money}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSliding: false, //是否在进行侧滑操作
				startX: 0, //启示位置
				sliderPosition: 0, //侧滑元素（滑块）的当前横向位置
				// currentX: 0,
				startXs: 0,
				endX: 0,
				
				money:0, //显示价格
				
			};
		},
		props:{
			startPrice:{
				default:0
			},
			endPrice:{
				default:10800
			},
			tolength:{
				default:550
			},
			defaultprice:{
				default:0
			}
		},
		mounted(){
		    // 只监听一次
		    const unWatch = this.$watch("endPrice", (newVal, oldVal) => {
		      // 只执行一次的逻辑
			 
			  this.hkwz()
		      unWatch(); // 取消监听
		    });
		  },
		watch:{
			'defaultprice':{
				handler:function (old){
					console.log(old,"=======12");
					this.money = old
					// this.$nextTick(()=>{
						
					// 	this.assaaa()
					// })
				},
				immediate:true,
				deep:true
			}
		},
		methods: {
			touchStart(event) {
				this.isSliding = true;
				this.startX = event.touches[0].clientX;
				this.startXs = event.touches[0].clientX
			},
			touchEnd(event) {
				console.log('touchEnd，触摸结束', event);
				this.isSliding = false;
				this.endX = event.changedTouches[0].clientX
				// // 触发滑快是否全部绽放 或者全部收起
				this.assaaa()
			},
			// 计算滑块位置
			hkwz(){
				setTimeout(()=>{
					this.sliderPosition = (this.money/this.endPrice)*this.tolength
				},100)
				
				
				console.log(this.sliderPosition,this.endPrice,this.money,this.endPrice,"========");
				
				
			},
			
			
			
			// 滑块向左移动了30% 用户触摸滑动
			assaaa() {
				// 终点-起点判断移动了多少
				// const deltaX = this.endX - this.startXs;
				
				// 根据长度，计算当前价格
				// ((600/this.endPrice)*this.sliderPosition)
				
				console.log("技术按","=",this.sliderPosition);
				let price = ((this.endPrice - this.startPrice)/this.tolength).toFixed(2)
				
				this.money = Math.round((price*this.sliderPosition).toFixed(2)/10)*10
				
				this.$emit("touchEnd",this.money)
				
				
	
			},
			handletouchmove(event) {
				
				
				if (this.isSliding) {
					const currentX = event.touches[0].clientX; //移动的当前位置
					const deltaX = currentX - this.startX; //移动的当前位置-开始位置 = 滑块的所在位置
					this.sliderPosition += deltaX;

					// 限制侧滑的最大宽度，可以根据需要调整
					if (this.sliderPosition > this.tolength) {
						console.log('进来了0');
						this.sliderPosition = this.tolength;
					}

					// 限制侧滑的最小宽度，可以根据需要调整
					if (this.sliderPosition < 0) {
						console.log('进来了-100');
						this.sliderPosition = 0;
					}
					this.startX = currentX;
					
					uni.$u.throttle(()=>{
						console.log('handletouchmove触摸移动');
						console.log(event.changedTouches[0].clientX);
						this.assaaa()
					}, 300)
					// console.log('this.startX：', this.startX);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slider-bottom {
		width: 100%;
		height: 20rpx;
		background: #EFF0F4;
		border-radius: 10rpx;
	}

	.slider-choose {
		width: 0rpx;
		height: 20rpx;
		background: #0FB7FC;
		border-radius: 10rpx;
	}

	.slider-total {
		width: 90rpx;
		height: 40rpx;
		background: #EFF0F4;
		border-radius: 20rpx;
		right: 0;
		font-weight: 500;
		font-size: 20rpx;
		color: #333333;
	}

	.slider-price {
		padding: 18rpx 22rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(138, 157, 194, 0.5);
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #198FFF;
		// left: 50%;
	}
</style>